<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1> {{msg}}</h1>
    <!--
   事件的基本使用：
        1.语法： v-on:event="事件名称"或者 @event="事件名称"
        2.事件处理函数： 事件处理函数的第一个参数是默认的事件对象
        3.事件处理函数的this指向： 事件处理函数的this指向是vm（不要写箭头函数，箭头函数的this指向不是vm）
        4.@click="showInfo"  的写法和@click="showInfo($event)"  的写法是一样的 只是后者可以传递一个或多个参数
    -->
    <button v-on:click="showInfo">{{clickTip}}(不传参)</button>
    <hr/>
    <!-- 在函数后面加()传递参数   -->
    <!--  $event表示默认的mouseEvent对象  -->
    <button @click="showInfoParam($event,66)" >{{clickTip}}(传参)</button>
</div>
<script type="text/javascript">
    Vue.config.printWarnings = false;
    const vm = new Vue({
        el: '#root',
        data: {
            msg: '操作按钮',
            clickTip: '点击'
        },
        methods: {
            // 事件处理函数
            showInfo(event) {
                console.log(event.target.innerHTML);//button
                console.log(event);//event是原生的event对象
                console.log(this);//vm
                alert('你好,world');
            },
            showInfoParam(event, num) {
                console.log(event, num);//button

                alert('你好,world' + num);
            }
        }
    });
</script>
</body>
</html>